<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		 /* function changeEle(){
			  var d1=document.getElementById("d1");
			  d1.parentNode.bgColor="gray";
			  console.log(d1.previousSibling);
			  //前一个是文本节点，没有innverhtml属性
			  e=d1.previousSibling;
			  while(e.nodeType!=1){
				  e=e.previousSibling;
			  }
			  e.innerHTML="阿豪是个好同志";
		  } */
		  function changeEle(){
		  			  var d1=document.getElementById("d1");
		  			  d1.parentNode.bgColor="gray";
		  			  console.log(d1.previousSibling);
		  			  //前一个是文本节点，没有innverhtml属性
		  			 d1.previousElementSibling.innerHTML="阿豪是个good comrade";
		  }
		  function changeAfter(){
			   var d1=document.getElementById("d1");
			   d1.nextElementSibling.innerHTML="其实凯旋还是那个少年";
		  }
		  function changeSpan(){
			  var d1=document.getElementById("d1");
			  d1.lastElementChild.innerHTML="其实都不便宜";
		  }
		  function changeA(){
			  var d1=document.getElementById("d1");
			  var d2=d1.previousElementSibling;
			  d2.firstElementChild.innerText="平多多";
		  }
		</script>
	</head>
	<body>
		<p><a href="#">淘宝</a>你好，我司渣渣豪</p>
		<div id="d1">
			你好，这里有便宜的旋选卖
			<span style="color: red;">其实还有更便宜的殷果卖</span>
		</div>
		<h2>教育改变了凯旋</h2>
		<h1>We change lives</h1>
		
		<button type="button" onclick="changeEle()">点击修改元素</button>
		<button type="button" onclick="changeAfter()">点击D1的后一个元素</button>
		<button type="button" onclick="changeSpan()">修改d1的最后一个元素</button>
		<button type="button" onclick="changeA()">修改d1的前一个元素中的连接</button>
	</body>
</html>
